<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">

    <style type="text/css">
        .td-label{
            width: 6em;
            text-align: right;
            padding-right: 5px;
        }
    </style>
</head>
<body class="ibox-content">

    <table>
        <tr>
            <td class="td-label">变量名：</td>
            <td><input type="text" class="form-control" id="data-variate"></td>
            <td class="td-label">默认值：</td>
            <td><input type="text" class="form-control" id="data-value"></td>
        </tr>
        <tr><td colspan="4" style="height: 10px;"></td></tr>
        <tr>
            <td class="td-label">公式：</td>
            <td colspan="3"><input type="text" class="form-control" id="data-formula"></td>
        </tr>
        <tr><td colspan="4" style="height: 10px;"></td></tr>
        <tr>
            <td class="td-label">输入类型：</td>
            <td colspan="3">
                <select class="form-control" id="input-type">
                    <option value="disable">禁止输入</option>
                    <option value="number">数值输入</option>
                    <option value="string">文本输入</option>
                    <option value="select">选择输入</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class="td-label"></td>
            <td colspan="3">
                <div style="height: 110px;max-height: 110px;overflow: auto;">
                    <table style="width: 100%;" id="select-option">
                        <tbody>
                            <tr>
                                <td><input name="name" type="text" class="form-control" placeholder="选项名" disabled></td>
                                <td><input name="value" type="text" class="form-control" placeholder="选项值" disabled></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!--页面中一定要引入internal.js为了能直接使用当前打开dialog的实例变量-->
    <!--internal.js默认是放到dialogs目录下的-->
    <script type="text/javascript" src="../js/plugins/ueditor/dialogs/internal.js"></script>
    <script>

        window.onload = function() {

            var type = $(UE.template).attr('input-type');
            var value = $(UE.template).attr('data-value');
            var formula = $(UE.template).attr('data-formula');
            var variate = $(UE.template).attr('data-variate');

            $('#data-variate').val(variate);
            $('#input-type').val(type);
            $('#data-value').val(value);
            $('#data-formula').val(formula);

            var option = $(UE.template).attr('select-option');
            if(!$.isEmptyObject(option)){
                $('#select-option>tbody').html('');
                option = eval(option);
                $(option).each(function () {
                    var html = '\
                            <tr>\
                                <td><input name="name" type="text" class="form-control" placeholder="选项名" value="'+this.name+'"></td>\
                                <td><input name="value" type="text" class="form-control" placeholder="选项值" value="'+this.value+'"></td>\
                            </tr>\
                            ';
                    $('#select-option>tbody').prepend(html);
                });

            }

        };

        $('#input-type').change(function () {
            if($(this).val() == 'select')
                $('#select-option input').removeAttr('disabled');
            else
                $('#select-option input').attr('disabled',true);
        });
        $('#select-option').on('focus','input',function () {
            var next = $(this).parents('tr').next();
            if(next.length == 0){
                var html = '\
                <tr>\
                    <td><input name="name" type="text" class="form-control" placeholder="选项名"></td>\
                    <td><input name="value" type="text" class="form-control" placeholder="选项值"></td>\
                </tr>\
                ';
                $('#select-option>tbody').append(html);
            }
        });
        dialog.oncancel = function () {

        };
        dialog.onok = function (){

            var variate = $('#data-variate').val();
            if($.isEmptyObject(variate))
                return;

            var array = '';
            $('#select-option tr').each(function () {
                var name = $(this).find('input[name="name"]').val();
                if($.isEmptyObject(name))
                    return;
                var value = $(this).find('input[name="value"]').val();
                if($.isEmptyObject(value))
                    return;

                array += "{name:'"+name+"',value:'"+value+"'},";
            });
            var type = $('#input-type').val();
            var value = $('#data-value').val();
            var formula = $('#data-formula').val();

            if(UE.template == undefined){
                var html =
                    '<value contenteditable="false" \
                        data-variate="'+variate+'" \
                    '+($.isEmptyObject(value)?'':'data-value="['+value+']"')+' \
                    '+($.isEmptyObject(formula)?'':'data-formula="['+formula+']"')+' \
                    '+(type=='disable'?'':'input-type="'+type+'"')+'\
                    '+(array == ''?'':'select-option="['+array+']"')+'></value>';

                editor.execCommand('inserthtml',html);
            }else{
                $(UE.template).attr('input-type',type);
                $(UE.template).attr('data-value',value);
                $(UE.template).attr('data-formula',formula);
                $(UE.template).attr('data-variate',variate);
                $(UE.template).attr('select-option','"['+array+']"');
            }

        };
    </script>
</body>
</html>